<script setup>
import { ref, reactive } from "vue";

defineProps({
  msg: String,
  aaa: String,
});

const count = ref(0);
const myObj = reactive({
  list: [
    { id: 1, name: "孙小双", age: 33 },
    { id: 2, name: "张三", age: 66 },
    { id: 3, name: "李四", age: 23 },
  ],
});

const users = reactive([]);
// console.log(users);
function hehe(el) {
  // console.log(el);
  users.push(el);
}

// let aaa = ref('')
</script>

<script>
export default {
  watch: {
    aaa: function (old, val) {
      console.log(old, val);
    },
  },
  computed: {
    caaa() {
      return this.aaa;
    },
  },
};
</script>


<template>
  <h1>{{ msg }}</h1>
  <input type="text" v-model.lazy="aaa" /> {{ caaa }}
  <ul>
    <li v-for="item in myObj.list" :key="item.id" :ref="hehe">
      {{ item.name }}
    </li>
  </ul>
  <p>
    Recommended IDE setup:
    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
    +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
  </p>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button type="button" @click="count++">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
